<template>
  <div class="console">
    <!--数据卡片-->
    <n-grid class="pb-5" cols="1 s:2 m:3 l:4 xl:3 2xl:3" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1  py-1 items-center">
            <div class=" flex items-center">
              <img src="/src/assets/images/index2.png" alt="" style="width: 32px; height: 39px" />
              <span style="font-size: 18px" class="pl-5 mr-10">过期未检数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl inspected" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1   py-1 items-center">
            <div class=" flex items-center">
              <img src="/src/assets/images/index2.png" alt="" style="width: 32px; height: 39px" />
              <span style="font-size: 18px" class="pl-5 mr-10">报废数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl scrap" />
          </div>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <div class="flex px-1 py-1 items-center">
            <div class="  flex items-center">
              <img src="/src/assets/images/index3.png" alt="" style="width: 30px; height: 33px" />
              <span style="font-size: 18px" class=" pl-5 mr-10">临近维修期数量</span>
            </div>
            <n-skeleton v-if="loading" :width="100" size="medium" />
            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl maintain" />
          </div>
        </NCard>
      </n-grid-item>
    </n-grid>
    <n-card :bordered="false" class="proCard">
      <div>
         <BasicForm
        :showAdvancedButton="false"
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row: ListData) => row.id"
          ref="actionRef"
          :actionColumn="actionColumn"
          :scroll-x="1090"
        >
        </BasicTable>
      </div>
    </n-card>
  </div>
</template>
<script lang="ts" setup>
  import { getConsoleInfo } from '@/api/dashboard/console';
  import { useECharts } from '@/hooks/web/useECharts';
  import { h, reactive, ref, onMounted } from 'vue';
  import { BasicTable } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
  import { PlusOutlined } from '@vicons/antd';
  import { columns, ListData } from './columns';
  import { useRouter } from 'vue-router';
  import { type FormRules } from 'naive-ui';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  const loading = ref(true);
  const visits = ref<any>({});
  const saleroom = ref<any>({});
  const orderLarge = ref<any>({});
  const volume = ref(<any>{});
  const current=ref(0)
  onMounted(async () => {
    const data = await getConsoleInfo();
    visits.value = data.visits;
    saleroom.value = data.saleroom;
    orderLarge.value = data.orderLarge;
    volume.value = data.volume;
    loading.value = false;
  });
  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'NInput',
      label: '',
      componentProps: {
        placeholder: '请输入',
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
  ];
  const formBtnLoading = ref(false);
  const formParams = reactive({
    name: '',
    role: null,
    droit: true,
  });
 
  const changeTabs=(index)=>{
    console.log(index)
    current.value=index
  }
  const loadDataTable = async (res) => {
    return await getTableList({ ...res });
  };
  function reloadTable() {
    actionRef.value.reload();
  }
   const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });
</script>

<style lang="less" scoped>
  .text-3xl {
    font-weight: bold;
    font-size: 52px !important;
  }
  .inspected {
    color: #f4b919;
  }
  .scrap {
    color: #06bb9a;
  }
  .maintain {
    color: #8e7ef0;
  }
  .tabs {
    font-size: 14px;
    padding: 20px 0;
    div {
       cursor: pointer;
      background: #f5f7fa;
      padding: 5px 20px;
      border-radius: 4px 4px 4px 4px;
    }
    .active{
       color: #fff;
       background: #8E7EF0;
    }
  }
</style>
